<template>
	<view class="main" @click="openFullMap">
		<view class="title">
			<text>位置分享</text>
			<text>导航</text>
			<uni-icons type="location" size="22" color="#55aaff"></uni-icons>
		</view>
		<image class="map" src="/static/map.png" mode="aspectFill"></image>
		<view class="location-text">
			<text class="u-line-3 location-address">{{ address || '获取地址中...' }}</text>
		</view>
	</view>
</template>

<script>
import setToTarget from '../../utils/setTarget';
import { location2address } from '../../utils/getPois';
import formatMessageTime from '../../utils/formatMessageTime';
import { formatDistance } from '../../utils/distance';

export default {
	props: {
		msg: { type: Object, required: true }, // 聊天消息对象
		lastTimestamp: {
			type: Number,
			default: 0
		}
	},
	data() {
		return {
			address: ''
		};
	},
	computed: {
		// 解析位置消息内容（从 msg.location 获取经纬度）
		locationData() {
			return this.msg.location && typeof this.msg.location === 'object' ? this.msg.location : { latitude: 0, longitude: 0 };
		},
		// 从vuex获取storeData
		storeData() {
			return this.$store.state.msg;
		}
	},
	mounted() {
		if (this.locationData.latitude && this.locationData.longitude) {
			this.getaddress();
		} else {
			this.address = '位置信息无效';
		}
	},
	methods: {
		async getaddress() {
			try {
				const res = await location2address(this.locationData);
				this.address = res.address || '未知地址';
			} catch (e) {
				console.error('获取地址失败：', e);
				this.address = '获取地址失败';
			}
		},
		openFullMap() {
			console.log("现有参数",this.$store.state.msg.queryParam,this.$store.state.msg.toTarget);
			this.$store.commit('msg/SET_backPageParams',{queryParam:this.$store.state.msg.queryParam,toTarget:this.$store.state.msg.toTarget})
			console.log('已存好参数',this.$store.state.msg.backPageParams);
			const { latitude, longitude } = this.locationData;
			if (!latitude || !longitude) return;
			this.$store.commit('msg/SET_queryParam', {
				type: 'public',
				location: this.$store.state.msg.senderLocation
			});
			this.$store.commit('msg/SET_isFly', true);
			this.$store.commit('msg/SET_location', this.locationData);
			setToTarget('public', { targetName: this.address });
			// 2. 再执行路由跳转（状态更新后再跳转，避免目标页面读取旧值）
			uni.navigateTo({
				url: '/pages/main/main',
			
			});
		},
		formatMessageTime,
		formatDistance(item) {
			return formatDistance(this.storeData.senderLocation, item);
		},

		isTimeshow(timestamp, lastTimestamp) {
			if (lastTimestamp > 0) {
				if (timestamp - lastTimestamp < 300000) {
					return false;
				} else if (!timestamp) {
					return false;
				} else {
					return true;
				}
			}
		},
		toUser() {
			console.log(this.msg.sendUserId);
			if (this.msg.sendUserId !== this.storeData.user.userId) {
				uni.navigateTo({
					url: `/pages/friend/friend?id=${this.msg.sendUserId}`
				});
			} else {
				uni.navigateTo({
					url: '/pages/me/me'
				});
			}
		}
	}
};
</script>

<style lang="scss" scoped>
.main {
	width: 100%;
}

.content {
	padding: 15rpx;
	border-radius: 4px;
	word-break: break-all;
	line-height: 45rpx;
	position: relative;
}

/* 位置消息容器：纵向布局，移除强制居中 */
.location-message-container {
	display: flex;
	flex-direction: column;
	border-radius: 16rpx;
	padding: 20rpx;
}

/* 他人发送的消息气泡色 */
.location-message-container {
	background-color: #f5f5f5;
}

/* 地图图片样式：自适应容器宽度 */
.map {
	width: 100%; /* 宽度铺满气泡容器 */
	height: 180rpx; /* 固定高度，比例协调 */
	border-radius: 12rpx;
	margin-bottom: 8rpx; /* 地图与地址间距 */
	object-fit: cover; /* 防止图片变形 */
}

/* 位置文本样式 */
.location-text {
	width: 100%;
	text-align: left;
}
.location-address {
	font-size: 26rpx;
	padding-left: 25rpx;
	color: #666;
	line-height: 1.4;
}
.title {
	display: flex;
	font-size: 26rpx;
	gap: 25rpx;
	font-weight: 600;
	padding-left: 25rpx;
	margin-bottom: 25rpx;
}
</style>
